<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>

    <h1 style="text-align: center">用户列表</h1>

    <div style="text-align: center" th:if="${session.user != null}">
        欢迎 <span th:text="${session.user.email}"></span> ，
        如果退出登录请点击<a href="/user/logout">这里</a>
    </div>
    <div style="text-align: center" th:if="${session.user == null}">
        <a href="/user/register">注册</a>
        <a href="/user/login">登录</a>
    </div>

    <!-- 当修改成功后给出提示信息 -->
    <p th:text="${message}" style="text-align: center"></p>

    <table align="center" border="1">
        <!-- 表头 -->
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>邮箱</th>
            <th>密码</th>
            <th th:if="${session.user != null}">操作</th>
            <th>state.count</th>
            <th>state.index</th>
            <th>state.first</th>
            <th>state.last</th>
            <th>state.odd</th>
            <th>state.even</th>
            <th>奇偶</th>
        </tr>
        <!-- 通过 each 来遍历 users 集合，遍历到的每条数据就是一个 tr -->
        <tr th:each="user, state : ${users}">
            <td th:text="${state.count}"></td>
            <td th:text="${user.id}"></td>
            <td th:text="${user.email}"></td>
            <td th:text="${user.password}"></td>
            <td th:if="${session.user != null}">
                <a th:href="'/user/change/'+${user.id}">编辑</a>
                <a th:href="'/user/remove/'+${user.id}" th:if="${user.id != session.user.id}">删除</a>
            </td>
            <td th:text="${state.count}"></td>
            <td th:text="${state.index}"></td>
            <td th:text="${state.first}"></td>
            <td th:text="${state.last}"></td>
            <td th:text="${state.odd}"></td>
            <td th:text="${state.even}"></td>
            <!-- 使用 th:switch 和 th:case 结合可以实现分支操作 -->
            <td th:switch="${state.even}">
                <span th:case="true">偶数行</span>
                <span th:case="false">奇数行</span>
            </td>
        </tr>
    </table>

</body>
</html>